<template>
  <div class="project-container">
    <el-card shadow="never">
      <div class="project-header">
        <el-form :inline="true">
          <el-form-item>
            <span class="title-label">项目</span>
            <el-input
              v-model="projectName"
              placeholder="搜索"
              style="width: 220px"
              clearable
            ></el-input>
          </el-form-item>
          <!--
                    <el-form-item>
                      <span class="title-label">状态</span>
                      <el-select
                        v-model="status"
                        placeholder="菜单状态"
                        style="width: 220px"
                      >
                        <el-option label="正常" :value="true"></el-option>
                        <el-option label="停用" :value="false"></el-option>
                      </el-select>
                    </el-form-item> -->

          <el-form-item style="margin-left: 25px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <div class="button-container">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >
            新增
          </el-button>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleLog"
          >
            写日志
          </el-button>
          <!-- <el-button
            type="info"
            plain
            icon="el-icon-sort"
            size="mini"
            @click="toggleExpandAll"
          >
            展开/折叠
          </el-button> -->
        </div>
      </div>

      <div class="project-body">
        <!-- v-if="refreshTable" -->
        <!-- :default-expand-all="isExpandAll" -->

        <el-table
          :data="projectList"
          :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
          ref="table"
          row-key="project_id"
          style="width: 100%"
          size="big"
        >
          <el-table-column
            prop="projectId"
            label="项目ID"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" align="center">
          </el-table-column>
          <el-table-column
            prop="projectDescription"
            label="项目描述"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="开始日期"
            align="center"
            :formatter="(row) => new Date(row.startDate).toLocaleDateString()"
          >
          </el-table-column>
          <el-table-column
            prop="dueDate"
            label="结束日期"
            align="center"
            :formatter="(row) => new Date(row.dueDate).toLocaleDateString()"
          >
          </el-table-column>

          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column
            prop="projectManagerId"
            label="项目管理人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            align="center"
            :formatter="(row) => new Date(row.createdAt).toLocaleDateString()"
          >
          </el-table-column>
          <el-table-column
            prop="updatedAt"
            label="更新时间"
            align="center"
            :formatter="(row) => new Date(row.updatedAt).toLocaleDateString()"
          >
          </el-table-column>
          <el-table-column>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleLog"
            >
              写日志
            </el-button>
          </el-table-column>
        </el-table>
      </div>

      <div class="project-footer">
        <el-pagination
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      width="700px"
      :visible="dialogShow"
      :before-close="handleClose"
    >
      <el-form :model="project" ref="projcetInfoForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务名称" label-width="120px">
              <el-input
                placeholder="请输入任务名称"
                v-model="project.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务描述" label-width="120px">
              <el-input
                type="textarea"
                placeholder="请输入任务描述"
                v-model="project.projectDescription"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务状态" label-width="120px">
              <el-input
                type="number"
                placeholder="请输入任务状态"
                v-model="project.status"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务管理人ID" label-width="120px">
              <el-input
                type="number"
                placeholder="请输入任务管理人ID"
                v-model="project.projectManagerId"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="起始时间" label-width="120px">
              <el-date-picker
                v-model="project.startDate"
                type="date"
                placeholder="选择开始日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="截止时间" label-width="120px">
              <el-date-picker
                v-model="project.dueDate"
                type="date"
                placeholder="选择截止日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="创建时间" label-width="120px">
              <el-date-picker
                v-model="project.createdAt"
                type="date"
                placeholder="选择创建日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新时间" label-width="120px">
              <el-input
                disabled
                :value="dateFormat(project.updatedAt)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="logTitle"
      width="700px"
      :visible="logShow"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="任务名称" label-width="120px">
          <el-input v-model="projectName" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleLClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllProjects, createProject } from "@/api/project";
import dayjs from "dayjs";

export default {
  name: "Projects",

  data() {
    return {
      // 查询参数
      projectId: undefined,
      projectName: "",
      projectDescription: "",
      startDate: "",
      dueDate: "",
      status: "",
      // priority: "",
      projectManagerId: "",
      // parent_project_id: "",
      createdAt: "",
      updatedAt: "",
      curPage: 1,
      size: 10,
      total: 0,
      // refreshTable: true,
      // isExpandAll: false,
      // 菜单表格数据
      projectList: [],
      //任务对象
      project: {},
      // 对话框是否显示
      projectInfo: {
        projectId: undefined,
        projectName: "",
        projectDescription: "",
        startDate: "",
        dueDate: "",
        status: "",
        projectManagerId: "",
        createdAt: "",
        updatedAt: "",
      },

      dialogShow: false,
      // 对话框标题
      dialogTitle: "",
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    // 获取表格数据
    getTableData() {
      getAllProjects({
        curPage: this.curPage,
        size: this.size,
        projectName: this.projectName,
      }).then((result) => {
        this.projectList = result.list;
        this.total = result.total;
      });
      // console.log(this.projectList);
    },
    // 处理分页

    handleAdd() {
      this.dialogTitle = "添加项目";
      this.dialogShow = true;
    },
    handleLog() {
      this.logTitle = "填写日志";
      this.logShow = true;
    },
    handleQuery() {
      this.getTableData();
    },
    // 点击了重置按钮
    resetQuery() {
      // 重新设置查询参数
      this.queryParams.name = "";
      // 菜单状态
      this.queryParams.enabled = true;
    },
    handleClose() {
      this.dialogShow = false;
      this.reset();
    },
    handleLClose() {
      this.logShow = false;
      this.LogReset();
    },
    reset() {
      // 修改表单标题
      this.dialogTitle = "";
      // 重置表单对象
      this.project = {};
      // 重置用户信息对象
      this.projectInfo = {
        projectId: undefined,
        projectName: "",
        projectDescription: "",
        startDate: "",
        dueDate: "",
        status: "",
        projectManagerId: "",
        createdAt: "",
        updatedAt: "",
      };
    },

    LogReset() {
      // 修改表单标题
      this.dialogTitle = "";
      // 重置表单对象
      this.project = {};
      // 重置用户信息对象
      this.projectInfo = {
        projectId: undefined,
        projectName: "",
        projectDescription: "",
        startDate: "",
        dueDate: "",
        status: "",
        projectManagerId: "",
        createdAt: "",
        updatedAt: "",
      };
    },

    submitForm() {
      {
        this.projectInfo.projectId = this.project.projectId;
        this.projectInfo.projectName = this.project.projectName;
        this.projectInfo.projectDescription = this.project.projectDescription;
        this.projectInfo.startDate = this.project.startDate;
        this.projectInfo.dueDate = this.project.dueDate;
        this.projectInfo.status = this.project.status;
        this.projectInfo.projectManagerId = this.project.projectManagerId;
        this.projectInfo.createdAt = this.project.createdAt;
        this.projectInfo.updatedAt = this.project.updatedAt;
        console.log("信息：", this.projectInfo);
        createProject(this.projectInfo).then(() => {
          this.getTableData();
        });
      }
      this.handleClose();
    },
    // 更多操作触发
    handleCommand(row) {
      switch (command) {
        case "handleResetPwd":
          this.handlePasswordOpen(row);
          break;
        case "handleAuthRole":
          this.handleRoleOpen(row);
          break;
        default:
          break;
      }
    },
    handleSizeChange(val) {
      this.size = val;
      // 重新获取数据
      this.getTableData();
    },
    // 当前页发生变化时
    handleCurrentChange(val) {
      this.curPage = val;
      // 重新获取数据
      this.getTableData();
    },

    dateFormat(date) {
      // 使用 dayjs 处理时间
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 展开/折叠操作
    // toggleExpandAll() {
    //   this.refreshTable = false;
    //   this.isExpandAll = !this.isExpandAll;
    //   this.$nextTick(() => {
    //     this.refreshTable = true;
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.project-container {
  margin-top: 10px;

  .project-header {
    margin-top: 10px;
    padding-left: 15px;

    .title-label {
      font-size: 14px;
      font-weight: 700;
      color: #606266;
      margin-right: 12px;
    }
  }

  .project-body {
    margin: 20px 15px 30px 15px;
  }
  .project-footer {
    padding-left: 15px;
    margin-top: 40px;
  }
}
</style>

